JSFiddle - React, Tailwind, and code Playground

HTML

<button id="toggle" onclick="document.getElementById('slider').classList.toggle('active');">Toggle slider</button>

<div class="slider-wrapper">
    <div id="slider" class="slider">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
        </ul>
    </div>
</div>

CSS

#toggle { padding: 4px; border: 1px solid #ccc; }

.slider-wrapper {
		overflow:hidden;
    	position:relative;
	}

    .slider {
		overflow-y: hidden;
		max-height: 0px;
		-webkit-transition: .5s cubic-bezier(0, 1, 0.5, 1);
		-moz-transition: .5s cubic-bezier(0, 1, 0.5, 1);
		-o-transition: .5s cubic-bezier(0, 1, 0.5, 1);
		transition: .5s cubic-bezier(0, 1, 0.5, 1);

    }

	.slider.active {		
	    max-height:1000px;
	}